<template>
  <div class="form">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="link" label="link">
        <el-input v-model="form.link"></el-input>
      </el-form-item>
      <el-form-item prop="alt" label="alt">
        <el-input v-model="form.alt"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload class="avatar-uploader" :show-file-list="false" :http-request="upload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item prop="img" label="base64">
        <el-input v-model="form.img"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="post">提交</el-button>
        <el-button type="primary" @click="onSubmit" class="re">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addswipe } from '../../service/banners';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
export default {
  components: {
    Plus
  },
  data() {
    return {
      imageUrl: '',
      form: {
        link: '',
        alt: '',
        img: ''
      },
      rules: {
        link: [{ required: true, message: '请输入link', trigger: 'blur' }],
        alt: [{ required: true, message: '请输入alt', trigger: 'blur' }],
        img: [{ required: true, message: '请上传图片', trigger: 'blur' }]
      }
    };
  },
  methods: {
    onSubmit() {
      let formEl = this.$refs.form; //找到表单元素
      if (!formEl) return;
      formEl.validate(valid => {
        //validate表单校验方法
        //表单校验通过 valid是true 否则 valid是false
        if (valid) {
          // console.log('submit!',this.form)
          addswipe(this.form).then(res => {
            // console.log(res);
            if (res.code === '200') {
              this.$router.push('/home/swipemanage/swipelist');
            }
          });
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    upload(file) {
      // this.imageUrl = URL.createObjectURL(file.file); //图片预览
      // console.log(file);
      // if (!['image/jpg', 'image/gif', 'image/png'].includes(file.file.type)) {
      //   ElMessage({
      //     message: '图片格式不对',
      //     type: 'warning'
      //   });
      //   return;
      // }
      if (file.file.size / 1024 / 1024 > 2) {
        ElMessage({
          message: '图片不能大于2M',
          type: 'warning'
        });
        return;
      }
      let fr = new FileReader();
      fr.readAsDataURL(file.file);
      fr.onload = data => {
        // console.log(data.currentTarget.result);
        this.imageUrl = data.currentTarget.result;
        this.form.img = data.currentTarget.result;
      };
    }
  }
};
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.post {
  margin-left: 60px;
}
.re {
  color: #000;
  background-color: white;
  border: 0;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.el-form-item__label {
  width: 60px;
}
.form {
  margin-top: 50px;
  width: 300px;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px dashed white;
}
</style>